<template>
	<view class="order_detail">
		<view class="top">
			<!-- <Navbar></Navbar> -->
			<view class="bg">
				<view v-if="orderDetail.type == 1" class="success">
					<image src="../../static/八维票务小程序 UI 切图/PNG/2x/Icon/完成.png" mode=""></image>
					<view>
						<view class="_h1">出票成功</view>
						<view class="_p">请您持购票证件在车站或代售点取票后按时乘车</view>
					</view>
				</view>

				<view v-if="orderDetail.type == 2" class="wait_pay">
					<text class="pay_title">待支付</text>
					<view class="pay_timer">支付剩余 <view class="timer"><u-count-down :time="60 * 60 * 1000"
								format="HH:mm:ss"></u-count-down></view>
					</view>
				</view>

				<view v-if="orderDetail.type == 3" class="fail">
					<image src="../../static/八维票务小程序 UI 切图/PNG/1x/Icon/取消.png" mode=""></image>
					<view>
						<view class="_h1">已取消</view>
						<view class="_p">您的订单因支付超市取消，可重新订购</view>
					</view>
				</view>
			</view>
			<view class="redius">

			</view>
		</view>

		<view class="info">
			<view class="info_header">
				<text>取票号：BW123455</text>
			</view>

			<view class="info_main">
				<view class="main_left">
					<view>06月15日周二</view>
					<view style="font-weight: 700; font-size: 30px;">{{orderDetail.start_time}}</view>
					<view style="display: flex; align-items: center; margin-top: 10rpx;">
						<text>{{orderDetail.from_city}}</text>
						<image src="../../static/八维票务小程序 UI 切图/PNG/2x/Icon/地标.png" mode=""></image>
					</view>
				</view>

				<view class="main_center">
					<view class="stopover">
						经停信息
					</view>
					<view>
						{{orderDetail.Train_number}}
					</view>
					9
				</view>

				<view class="main_right">
					<view>06月15日周二</view>
					<view style="font-weight: 700; font-size: 30px;">{{orderDetail.end_time}}</view>
					<view style="display: flex; align-items: center; margin-top: 10rpx;">
						<image src="../../static/八维票务小程序 UI 切图/PNG/2x/Icon/地标.png" mode=""></image>
						<text>{{orderDetail.to_city}}</text>
					</view>
				</view>
			</view>

			<view class="info_footer">
				<view class="footer_left">
					<view class="rider">
						<text>{{orderDetail.rider}}</text>
						<image style="width: 40px; height: 20px;" src="../../static/八维票务小程序 UI 切图/PNG/2x/Tag/成人票.png"
							mode="" />
					</view>

					<view class="id_card">
						<text>身份证&nbsp;130634**********10</text>
					</view>

					<view class="types" :style="{color: renderType(orderDetail.type).color}">
						{{renderType(orderDetail.type).text}}
					</view>
				</view>

				<view class="footer_right">
					<view class="price">
						<text>一等座</text>
						<text>￥{{orderDetail.price}}</text>
					</view>

					<view class="seat" style="display: flex; align-items: center;">
						<image style="width: 30px; height: 20px;" src="../../static/八维票务小程序 UI 切图/PNG/2x/Tag/靠窗.png"
							mode="" />
						<text>{{orderDetail.seat}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="order-phone">
			<view class="order_num">
				<text>订单号</text>
				<text>{{orderDetail.order_num}}</text>
			</view>

			<view class="phone_num">
				<text>手机号</text>
				<text>{{orderDetail.phone}}</text>
			</view>
		</view>

		<view class="all-price">
			<view class="unit_price">
				<text>成人票</text>
				<text>￥{{orderDetail.price}}x{{orderDetail.nums}}张</text>
			</view>

			<view class="all">
				<text>订单总计</text>
				<text
					style="font-weight: 700; font-size: 18px; color: orange;">￥{{orderDetail.price * orderDetail.nums}}
				</text>
			</view>
		</view>

		<view class="detail_footer" v-if="orderDetail.type != 1">
			<view class="btn" v-if="orderDetail.type === 2">
				<u-button type="primary" shape="circle" color="orange" text="去支付"></u-button>
			</view>
			<view class="btn" v-if="orderDetail.type === 3">
				<u-button type="primary" shape="circle" color="orange" text="重新订购"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	let orderDetail = ref({})

	onLoad((options) => {
		orderDetail.value = JSON.parse(decodeURIComponent(options.code))
		console.log(orderDetail, 'order')
	})

	function renderType(type) {
		switch (type) {
			case 1:
				return {
					color: 'green',
						text: '出票成功'
				}
				break

			case 2:
				return {
					color: 'red',
						text: '待支付'
				}

			case 3:
				return {
					color: 'black',
						text: '已取消'
				}
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.order_detail {
		width: 100%;
		height: 100%;

		.top {
			.bg {
				width: 100%;
				height: 180px;
				background-color: #1BA9BA;
				padding: 30px 20rpx;

				.success {
					display: flex;
					align-items: center;

					image {
						width: 50px;
						height: 50px;
					}
				}

				.wait_pay {
					width: 90%;
					padding: 20rpx;
					background-color: white;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.pay_title {
						font-size: 36px;
						color: red;
						font-weight: 700;
					}

					.pay_timer {
						font-size: 18px;

						.timer {
							color: darkorange !important;
							font-weight: 700;
						}
					}
				}

				.fail {
					display: flex;
					align-items: center;

					image {
						width: 50px;
						height: 50px;
					}
				}

				._h1 {
					height: 31px;
					font-family: MicrosoftYaHei;
					font-size: 24px;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0px;
					color: #ffffff;
					padding-left: 20rpx;
				}

				._p {
					height: 20px;
					font-family: MicrosoftYaHei;
					font-size: 15px;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0px;
					color: #ffffff;
					padding-left: 20rpx;
					margin-top: 20rpx;
				}
			}

			.redius {
				width: 100%;
				height: 40px;
				background-color: #1BA9BA;
				border-bottom-left-radius: 50%;
				border-bottom-right-radius: 50%;
			}
		}

		.info {
			width: 90%;
			height: 260px;
			background-color: #ffffff;
			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
			border-radius: 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -100%);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 20rpx;

			.info_main {
				display: flex;
				justify-content: space-between;

				image {
					width: 20px;
					height: 20px;
				}

				.main_center {
					display: flex;
					flex-direction: column;
					margin-top: 30px;
					text-align: center;

					.stopover {
						width: 70px;
						padding: 10rpx;
						border: 1px solid #ccc;
						border-radius: 20px;
						margin-bottom: 10rpx;
					}
				}

				.main_right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
				}
			}

			.info_footer {
				width: 95%;
				height: 100px;
				background: #efefef;
				margin: 0 auto;
				border-radius: 5px;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;

				.footer_left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.rider {
						font-weight: 700;
						display: flex;
						align-items: center;
					}

					.id_card {
						color: #ccc;
					}
				}

				.footer_right {
					height: 66.66%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
				}
			}
		}

		.order-phone {
			margin-top: 150px !important;
			width: 90%;
			height: 100px;
			background-color: #ffffff;
			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
			border-radius: 5px;
			padding: 20rpx;
			margin: 0 auto;

			.order_num {
				height: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ccc;
			}

			.phone_num {
				height: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center
			}
		}

		.all-price {
			margin-top: 10px !important;
			width: 90%;
			height: 100px;
			background-color: #ffffff;
			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
			border-radius: 5px;
			padding: 20rpx;
			margin: 0 auto;

			.unit_price {
				height: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ccc;
			}

			.all {
				height: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center
			}
		}

		.detail_footer {
			width: 100%;
			height: 100px;
			position: fixed;
			bottom: 0;
			background-color: #ffffff;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);

			.btn {
				width: 95%;
				margin: 10rpx auto;
			}
		}
	}
</style>